<template>
  <div class="my_order" >
  	 <!-- 头部 -->
  	 <div class="order_head">
  	 	 <div class="head_img">
  	 	 	<img :src="userinfo.headimgurl+'?x-oss-process=image/resize,m_fill,h_80,w_80'" alt="" v-if="userinfo.headimgurl!=''">
        <img src="../../assets/image/default.png" alt="" v-else>
  	 	 </div>
  	 	 <div class="user_info">
  	 	 	 <div class="username">
  	 	 	 	<span class="name" v-if="authentication">{{userinfo.name}}</span>
          <span class="name" v-if='authentication===false'>{{userinfo.nickname}}</span>
  	 	 	 	<span class="authentication" v-if="authentication"><span>已认证</span></span>
  	 	 	   <span class="authentication" v-else><span>未认证</span></span>
  	 	 	 </div>
  	 	 	 <div class="user_phone">{{userinfo.phone||""}}</div>
  	 	 </div>
  	 	 <div  @click="jump('/userinfo')" class="setting"></div>
  	 </div>
  	 <!-- 未完成身份认证，立即查看订单 -->
  	 <div class="gotoauthen" v-if="authentication===false">
      <span>我的订单</span>
      <div class="norenzhen">
  	   <img src="../../assets/image/norenzhen.png" alt="">
       <span>完成身份认证，立即查看订单</span>
  	   <router-link to="/idcardtwo" >去认证</router-link>
       </div>
  	 </div>
  	 <!-- 已完成身份认证，无订单 -->
  	 <div class="noorder" v-if="authentication&&isempty"> 
  	   <span>我的订单</span>
       <div class="anyorder">
               <img src="../../assets/image/no_order.png" alt="">
               <span>还没有任何订单</span> 
       </div>
  	 </div>
     <div class="mainwrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"   infinite-scroll-immediate-check="true"  infinite-scroll-distance="20" v-if="authentication&&!isempty">
          <!-- 我的订单列表 -->
        	 <div class="my_order_top" v-if="myOrder.length!=0">	
               <span class="my_order_text">我的订单</span>
      		  	 <ul class="orderlist" >
    <!--              <mt-loadmore :top-method="loadTop"  :autoFill="false" ref="loadmore" class="loademore-top" bottomLoadingText="hahah "> -->
              		  	 	<li class="itemwrap" v-for="(item,index) in myOrder">
              		  	 	    <div class="itemtop">
              			  	 		<div class="hotel" >
                              <div class="hotel_edit" @click="go(item.hotel_code,item.index_auth)">
                                 <img :src="item.logo" alt="">
                                 <span class="hotelname">{{item.hotel}}</span>
                                 <i></i>
                              </div>
              				  	 		<span class="hasorder" v-if="item.status=='预订中'">已预订</span>
              				  	 		<span class="haslive" v-if="item.status=='已入住'">已入住</span>
              				  	 		<span class="hasquit" v-if="item.status=='已退房'">已退房</span>	  	 			  	 		
              			  	 		</div>
                            <router-link :to="{path:'/orderdetail',query:{orderNumber:item.orderNumber}}" style="display:block">
                			  	 		<div class="timearound">{{item.checkInTime}} 至 {{item.checkOutTime}}</div>
                			  	 		<div class="roominfo">
                			  	 			<span class="size">共{{item.day}}晚 {{item.roomType}}</span>
                			  	 			<span class="price">¥{{item.view_price.int}}<span class="littlenum">{{item.view_price.float}}</span></span>
                			  	 		</div>
                            </router-link>
              		  	 		</div>
              		  	 		<div class="itembottom" > 		
              		  	 			<router-link to='' class="buttom quicklive" v-if="item.status=='预订中'"><span>快速入住办理</span></router-link>
              		  	 			<router-link :to="{path:'/inviocedetail',query:{orderNumber:item.orderNumber}}" class="buttom" v-if="item.invoice_type!='0'&&item.status!='预订中'">
                            <span>查看发票详情</span></router-link>
              		 	 			<router-link :to="{path:'/apply_invioce',query:{orderNumber:item.orderNumber}}" class="buttom" v-if="item.invoice_type=='0'&&item.status!='预订中'&&item.invoice_auth=='1'">
                          <span>申请开发票</span></router-link>		 	 			
              		  	 		</div>
              		  	 	</li> 
<!--                    </mt-loadmore>   -->                         		 	
      		  	 </ul>
        	 </div>
           <!-- 历史订单 -->
           <div :class="[class1,class2]" v-if="historyOrder.length!=0" >
               <div class="my_order_bottom_text">历史订单</div>
                <ul>  
                   <li class="itemwrap itemwrap_history" v-for="(item,index) in historyOrder">
                        <div class="itemtop">
                        <div class="hotel">
                           <div class="hotel_edit" @click="go(item.hotel_code,item.index_auth)">
                             <img :src="item.logo" alt="">
                             <span class="hotelname">{{item.hotel}}</span>
                             <i></i>
                          </div>
                          <span class="hasorder" v-if="item.status=='预订中'">已预订</span>
                          <span class="haslive" v-if="item.status=='已入住'">已入住</span>
                          <span class="hasquit" v-if="item.status=='已退房'">已退房</span>                    
                        </div>
                      <router-link :to="{path:'/orderdetail',query:{orderNumber:item.orderNumber}}" style="display:block">
                            <div class="timearound">{{item.checkInTime}} 至 {{item.checkOutTime}}</div>
                            <div class="roominfo">
                              <span class="size">共{{item.day}}晚 {{item.roomType}}</span>
                              <span class="price">¥{{item.view_price.int}}<span class="littlenum">{{item.view_price.float}}</span></span>
                            </div>
                         </router-link>
                      </div>
                      <div class="itembottom">    
                        <router-link to='' class="buttom quicklive" v-if="item.status=='预订中'"><span>快速入住办理</span></router-link>
                        <router-link :to="{path:'/inviocedetail',query:{orderNumber:item.orderNumber}}" class="buttom" v-if="item.invoice_type!='0'&&item.status!='预订中'">
                        <span>查看发票详情</span></router-link>
                      <router-link :to="{path:'/apply_invioce',query:{orderNumber:item.orderNumber}}" class="buttom" v-if="item.invoice_type=='0'&&item.status!='预订中'&&item.invoice_auth=='1'">
                      <span>申请开发票</span></router-link>            
                      </div>
                    </li> 
                </ul>
  
           </div>
           <div class="loading-box " v-if="isloademore" >
                <mt-spinner type="snake" class="loading-more"></mt-spinner><span>加载中...</span>
            </div> 
     </div>
  </div>	
</template>
<script>
import Wx from 'weixin-js-sdk';
import axios from 'axios';
import {Toast } from 'mint-ui';
import { Loadmore,Spinner} from 'mint-ui';
export default {
	components: {
			'mt-loadmore': Loadmore,
      "mt-spinner":Spinner
		},	
 	data(){
 		return{
 			authentication:'',//是否认证,true认证 false未认证
 			status:"1",//订单状态
 			historyOrder:'',
      myOrder:'',
 			page:1,
 			userinfo:'',
      allLoaded:false,
      isloademore:false,//滚动加载动画
      loademore:true,//是否滚动加载
      loading:false,
      isempty:false,//是否有订单
      scroll:0,
      class1:"my_order_bottom",
      class2:""
 		}
 	},
   mounted() {
      var that =  this;
      var  prevent = sessionStorage.getItem('prevent')
      if(prevent=='1'){//阻止触发mountedbug
        sessionStorage.removeItem('prevent')
        return false;
      }
      window.addEventListener('scroll', this.handleScroll);
      /*获取用户信息*/
      axios.post("/Weixin/Member/memberDetail",{}).then((res)=>{
        if(res.data.code == "1"){
          if(res.data.data.state == '3'){//认证
            this.authentication = true;
          }
          else{
            this.authentication = false;
          }
          if(res.data.data.phone!=''){
            res.data.data.phone = res.data.data.phone.substr(0, 3) + '****' + res.data.data.phone.substr(7,10);             
          }
       
          this.userinfo = res.data.data;
        }
        else{
          Toast(res.data.msg)
        }
      })      
      /*获取列表信息*/
        function cutstring(str){
          var obj ={
            int:str.substr(0,str.indexOf(".")+1),
            float:str.substr(str.indexOf(".")+1,100)
          }
          return obj
        }
        console.log("测试mounted")
        axios.post("/Weixin/Order/orderList",{page:1,type:"1"}).then((res)=>{
          if(res.data.code == "1"){
            var myOrder = res.data.myOrder;
            var historyOrder = res.data.historyOrder
            // 我的订单
            for(var i=0;i<myOrder.length;i++){
               myOrder[i].view_price = cutstring(myOrder[i].total_price)
            }
            //历史订单
            for(var i in historyOrder){
              historyOrder[i].view_price = cutstring(historyOrder[i].total_price)
            }
            // myOrder = [];//测试没我的订单
            // historyOrder = []//测试没历史订单
            // that.isempty = true;  //测试无订单
            if(myOrder.length =="0"){  
              that.class2 = 'bottom_fix'
            }
            that.myOrder = myOrder;
            that.historyOrder = historyOrder;
          }
          else{
              that.isempty = true;   
          }
        })
   
    },
 	created(){
        
      
 	},
  activated() {
      var that = this;
      console.log("测试activated")
      var deleteid = that.$store.state.deleteid;
      var refesh = that.$store.state.refesh;
      var historyOrder =  that.historyOrder;
      // 这里的document.body.scrollTop需要写兼容性问题
      if (document.body.scrollTop) {
        document.body.scrollTop = sessionStorage.getItem('roll')
      } else {
        document.documentElement.scrollTop = sessionStorage.getItem('roll')
      }
      //scrollTop = sessionStorage.getItem('roll')
      window.addEventListener('scroll', this.roll)
      /*页面删除订单*/   
      if(deleteid){
             for(var i=0;i<historyOrder.length;i++){
              if(historyOrder[i].id==deleteid){
                historyOrder.splice(i,1)
              }
            }
            that.$store.state.deleteid = '' ;         
      }
      /*更新用户信息*/
      axios.post("/Weixin/Member/memberDetail",{}).then((res)=>{
        if(res.data.code == "1"){
          if(res.data.data.state == '3'){//认证
            this.authentication = true;
          }
          else{
            this.authentication = false;
          }
          if(res.data.data.phone!=''){
            res.data.data.phone = res.data.data.phone.substr(0, 3) + '****' + res.data.data.phone.substr(7,10);             
          }          
          this.userinfo = res.data.data;
        }
        else{
          Toast(res.data.msg)
        }
      }) 
      /*刷新数据*/
      if(refesh){
          function cutstring(str){
            var obj ={
              int:str.substr(0,str.indexOf(".")+1),
              float:str.substr(str.indexOf(".")+1,100)
            }
            return obj
          }
          axios.post("/Weixin/Order/orderList",{page:1,type:"1"}).then((res)=>{
            if(res.data.code == "1"){
              var myOrder = res.data.myOrder;
              var historyOrder = res.data.historyOrder
              // 我的订单
              for(var i in myOrder){
                myOrder[i].view_price = cutstring(myOrder[i].total_price)
              }
              //历史订单
              for(var i in historyOrder){
                 historyOrder[i].view_price = cutstring(historyOrder[i].total_price)
              } 
              //myOrder = [];
              if(myOrder.length =="0"){
    
                that.class2 = 'bottom_fix'
              }                       
              that.myOrder = myOrder;
              that.historyOrder = historyOrder;
              that.page = 1;
              that.loading = false;              
              that.$store.state.refesh = ''
            }
            else{
              that.$store.state.refesh = '' 
            }
          })          
      }
  },
  deactivated(){
      console.log("测试deactivated")
      sessionStorage.setItem('roll', this.top)
      //console.log(sessionStorage.getItem('roll'))
      window.removeEventListener('scroll', this.roll)
      sessionStorage.setItem('prevent', "1")

  },
 	methods:{
     jump(url){
       this.$router.push(url);
     },
     //酒店跳转
     go(hotel_code,index_auth){
        if(index_auth=="1"){
           this.$router.push({path:"/hotel",query:{hotel_code:hotel_code}});      
        }
        else{
           this.$router.push({path:"/nohotel"}); 
        }

     },
    //绑定滚动事件
     roll () {
        this.top = document.body.scrollTop || document.documentElement.scrollTop
      },
 		//下拉刷新
       //  loadTop(){
       //  var that = this;
       //  that.merge = true;
       //  function cutstring(str){
       //    var obj ={
       //      int:str.substr(0,str.indexOf(".")+1),
       //      float:str.substr(str.indexOf(".")+1,100)
       //    }
       //    return obj
       //  }
	      // axios.post("/Weixin/Order/orderList",{page:"1",type:"1"}).then((res)=>{
	      //   if(res.data.code == "1"){
       //        var myOrder = res.data.myOrder;
       //        var historyOrder = res.data.historyOrder
       //      // 我的订单
       //      for(var i in myOrder){
       //        myOrder[i].view_price = cutstring(myOrder[i].total_price)
       //      }
       //      //历史订单
       //      for(var i in historyOrder){
       //        historyOrder[i].view_price = cutstring(historyOrder[i].total_price)
       //      }           
       //        that.myOrder = myOrder;
       //        that.historyOrder = historyOrder;
       //        that.page = 1;
       //        that.loading = false;
       //        window.setTimeout(function(){
       //          that.merge = false;
       //        },500)           
	      //        that.$refs.loadmore.onTopLoaded();
	      //   }
	      // })
       //   },
        loadMore(){
              // 加载更多数据
              var that =  this;
              var page =  that.page;//现在订单页码
              page++
              function cutstring(str){
                var obj ={
                  int:str.substr(0,str.indexOf(".")+1),
                  float:str.substr(str.indexOf(".")+1,100)
                }
                return obj
              }
              that.isloademore = true;        
              axios.post("/Weixin/Order/orderList",{page:page,type:"1"}).then((res)=>{
                if(res.data.code == "1"){
                var myOrder = res.data.myOrder;
                var historyOrder = res.data.historyOrder
                // 我的订单
                for(var i in myOrder){
                  myOrder[i].view_price = cutstring(myOrder[i].total_price)
                } 
                 //历史订单
                for(var i in historyOrder){
                  historyOrder[i].view_price = cutstring(historyOrder[i].total_price)
                }    
                 if(historyOrder.length!=0){
                   that.historyOrder = that.historyOrder.concat(historyOrder);
                 }
                 that.loading = false;       
                  this.page = page
                  setTimeout(() => {
                  that.isloademore = false;
                  that.myOrder =   that.myOrder.concat(myOrder);
                  }, 200);
                  
                }
                else{
                  that.allLoaded = true;
                  that.isloademore = false;
                  that.loading = true;

                }
              })
        }

 	}
}	
</script>
<style lang="scss">
.my_order{
  /*padding-bottom:5px;*/
}
.loading-box{
  display:flex;
  justify-content:center;
  font-size: 15px;
  align-items:center;
  margin-top:-5px;
}
.loading-box span{
  margin-left:5px;
}
.mint-spinner-snake{
  width:20px;
  height:20px;
  border-top-color: rgb(0, 137, 252) !important; border-left-color: rgb(0, 137, 252) !important; border-bottom-color: rgb(0, 137, 252) !important; height: 28px; width: 28px;

}
.littlenum{
  font-size: 13px;
}
.hotel_edit{
  display:flex;
  justify-content:center;
  align-items:center;
  img{
    width:24px;
    height:24px;
    margin-right:4px;
    border-radius:50%;
  }
  i{
    width:10px;
    height:16px;
    background:url(../../assets/image/right.png) no-repeat;
    background-size:100% 100%;
    margin-left:4px;
    position:relative;
    top:1px;
    opacity:0.5;
  }
}
.my_order_bottom{

}
.bottom_fix{
  padding-top:15px;
}
</style>